<template>
  <div class="list-table">
    <el-table :data="listData" stripe style="width: 100%">
      <!-- 复选框 -->
      <!-- <el-table-column type="selection" align="center" width="60" @selectChange="handleSelectChange"></el-table-column> -->
      <!-- 序号 -->
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="60"
        fixed="left"
      ></el-table-column>
      <!-- 表单循环 -->
      <el-table-column
        v-for="propItem in tableColumnProps"
        :prop="propItem.prop"
        :label="propItem.label"
        :width="propItem.width"
        align="center"
        :fixed="propItem.prop === 'handle' ? 'right' : false"
      >
        <template #default="scope">
          <!-- 设置具名插槽 + 作用域插槽，将当前行数据和索引传出去 -->
          <slot :name="propItem.slotName" :row="scope.row" :index="scope.$index">
            {{ scope.row[propItem.prop] }}
          </slot>
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <slot name="footer">
        <el-pagination
          :current-page="page.page_num"
          :page-size="page.page_size"
          :page-sizes="[5, 10, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </slot>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  listData: {
    type: Array,
    default: []
  },
  listCount: {
    type: Number,
    default: 0
  },
  tableColumnProps: {
    type: Array,
    default: []
  },
  page: {
    type: Object,
    default: () => {
      page_num: 0
      page_size: 10
    }
  }
})

const emit = defineEmits(['update:page'])

const handleSizeChange = (page_size) => {
  emit('update:page', {...props.page, page_size})
}

const handleCurrentChange = (page_num) => {
  emit('update:page', {...props.page, page_num})
}


</script>

<style lang="less" scoped>
.list-table {
  .el-pagination {
    width: 100%;
    justify-content: end;
    margin: 15px 0;
  }
}
</style>
